<template>
    <page-container title="基本资料">
        <!-- 表单部分 -->
        <template #default>
            <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="demo-ruleForm">
                <el-form-item label="登录名称" prop="loginName">
                    <el-input v-model="form.loginName" :disabled="true" />
                </el-form-item>

                <el-form-item label="用户昵称" prop="nickname">
                    <el-input v-model="form.nickname" />
                </el-form-item>

                <el-form-item label="用户邮箱" prop="email">
                    <el-input v-model="form.email" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleSubmit">提交修改</el-button>
                </el-form-item>
            </el-form>
        </template>
    </page-container>
</template>

<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { ref } from 'vue'
import { useUserStore } from '@/stores';
import { userUpdateInfoService } from '@/api/user'
//是在使用仓库中数据的初始值
const {
    user: { username, nickname, email, id, }, getUser
} = useUserStore()
console.log(username, nickname, email, id, 'user')
const form = ref({
    id,
    username, // 设定为禁用状态的默认值
    nickname,
    email,
});

const rules = {
    nickname: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { pattern: /^\S{2,10}$/, max: 10, message: '昵称长度在 2 到 10 个字符之间', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
    ],
};

const formRef = ref(null);
const handleSubmit = async () => {
    console.log('基本信息')
    const valid = await formRef.value.validate()
    if (valid) {
        await userUpdateInfoService(form.value)
        await getUser()
        ElMessage.success('修改成功')
    }
};

</script>

<style lang="scss" scoped></style>
